<template>
    <div class="search">
        <el-row>
            <el-col :span="20">
                <el-form ref="ruleForm" :rules="rules" :model="ruleform" label-width="100px">
                    <div class="top" :class="{ goupdown: isshowbody, godiv1: longScreen, godiv2: !longScreen }">
                        <slot name="top"></slot>
                        <slot name="center"></slot>

                    </div>
                    <div class="foot">
                        <slot name="foot"></slot>
                    </div>
                </el-form>
            </el-col>
            <el-col :span="4">
                <el-button @click="$emit('doReset')" size="small" :disabled="disabled"
                    style="width:65px;height:32px">重置</el-button>
                <el-button type="primary" @click.native="$emit('doQuery')" size="small" :disabled="disabled"
                    style="width:65px;height:32px">搜索</el-button>
                <el-button v-if="isshowhigh && Object.values(this.ruleform).slice(0, -5).length > 5" type="text"
                    @click="doToggle">{{ isshowbody ? '收起' : '高级搜索' }}
                    <i v-if="isshowbody" class="el-icon-arrow-down"></i>
                    <i v-else class="el-icon-arrow-up"></i>
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'search',
    props: {
        hashigh: {
            default: true,
        },
        hasform: {
            default: true,
        },
        rules: {
            type: Object,
            default: () => { },
        },
        ruleform: {
            type: Object,
            default: () => { },
        },
        disabled: {
            default: false,
        },
    },
    data() {
        return {
            isshowbody: false,
            isshowhigh: false,
            longScreen: true,
        };
    },
    created() {
    },
    mounted() {
        if (window.innerWidth < 1500) {
            this.isshowhigh = true;
            this.longScreen = false;
        } else {
            this.isshowhigh = this.hashigh;
        }
    },
    methods: {
        doToggle() {
            this.isshowbody = !this.isshowbody;
            this.$emit('doToggle');
        },
    },
};
</script>
  
<style scoped lang="scss">
.search {
    padding-bottom: 9px;

    .el-button--primary {
        background-color: #3C77FF;
        border-color: #3C77FF;
    }

    .el-button--text {
        color: #3C77FF;
        font-weight: 400;
    }

    .el-button.is-plain:focus,
    .el-button.is-plain:hover {
        background: #FFF;
        border-color: #3C77FF;
        color: #3C77FF;
    }

    .el-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .el-col-20 {
        width: 100% !important;
    }

    .el-col-4 {
        text-align: left;
        display: contents;
        // .el-button{
        //     margin-left: 0;
        // }
    }

    ::v-deep .el-input__inner {
        width: 100%;
    }

    .se:empty {
        display: none;
    }

    // 单选按钮
    ::v-deep .el-radio__inner {
        width: 22px;
        height: 22px;
    }

    ::v-deep .el-radio__inner::after {
        width: 9px;
        height: 9px;
    }

    .goupdown {
        max-height: 220px !important;
    }

    .godiv1 {
        opacity: 1;
        max-height: 50px;
        overflow: hidden;
        // transition-duration: 0.05s;
        // transition-property: all;
        // transition-timing-function: ease-in-out;
        // transition-delay: 0s;
    }

    .godiv2 {
        opacity: 1;
        max-height: 47px;
        overflow: hidden;
        // transition-duration: 0.05s;
        // transition-property: all;
        // transition-timing-function: ease-in-out;
        // transition-delay: 0s;
    }

    ::v-deep .el-form-item {
        margin: 6px 0px;
        display: inline-block;
        padding: 0;

        .el-select,
        .el-input {
            width: 100%;
        }
    }

    .top,
    .foot {
        //   border-top: 1px solid #ebeef5;
    }

    ::v-deep .top .el-form-item {
        width: 24%;
    }

    .foot:empty {
        border-top: none !important;
    }

    @media screen and (max-width: 1400px) {
        ::v-deep .top .el-form-item {
            width: 30%;
        }
    }

    ::v-deep .el-form-item__error {
        position: absolute;
        left: 101%;
        top: 30%;
        white-space: nowrap;
    }
}
</style>
  